<template>
	<view class="figures">
		<view class="figuresTitle">
			<view class="left">
				<image src="@/static/images/search.png" class="leftImg"></image>
				数字看板
			</view>
			<view class="right">
				<image src="@/static/images/time.png" class="rightImg"></image>
				数据更新时间：{{homePageCounInfo.currDate}}
			</view>
		</view>
		<view class="figuresCatiner">
			<view class="figuresList">
				<image src="@/static/images/s1.png" class="figuresListImg"></image>
				<view class="figuresRight">
					<view class="targetName">重点单位</view>
					<view class="targetName"><text class="targetNumber">{{homePageCounInfo.institutionCount}}</text>家
					</view>
				</view>
			</view>
			<view class="figuresList">
				<image src="@/static/images/s2.png" class="figuresListImg"></image>
				<view class="figuresRight">
					<view class="targetName">检查记录</view>
					<view class="targetName"><text class="targetNumber">{{homePageCounInfo.taskCheckCount}}</text>条
					</view>
				</view>
			</view>
			<view class="figuresList">
				<image src="@/static/images/s3.png" class="figuresListImg"></image>
				<view class="figuresRight">
					<view class="targetName">隐患处置</view>
					<view class="targetName"><text class="targetNumber">{{homePageCounInfo.warnDisposalCount}}</text>条
					</view>
				</view>
			</view>
			<view class="figuresList">
				<image src="@/static/images/s4.png" class="figuresListImg"></image>
				<view class="figuresRight">
					<view class="targetName">检查任务</view>
					<view class="targetName"><text class="targetNumber">{{homePageCounInfo.taskCount}}</text>条
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	const props = defineProps({
		homePageCounInfo: {
			type: Object,
			default: {},
		},
	});
</script>

<style lang="scss" scoped>
	.figures {
		width: 92%;
		height: 28vh;
		margin: auto;
		margin-top: 40rpx;
		background-color: #fff;
		box-shadow: 0px 0px 30px 0px rgba(70, 136, 211, 0.3);
		border-radius: 20rpx;

		.figuresTitle {
			width: 94%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: auto;

			.left {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				line-height: 137rpx;

				.leftImg {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.right {
				width: 55%;
				height: 100%;
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 137rpx;

				.rightImg {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.figuresCatiner {
			width: 94%;
			height: calc(100% - 90rpx);
			margin: auto;
			display: flex;
			flex-wrap: wrap;

			.figuresList {
				width: 49%;
				height: 45%;
				display: flex;
				align-items: center;

				.figuresListImg {
					width: 110rpx;
					height: 120rpx;
				}

				.figuresRight {
					margin-left: 20rpx;

					.targetName {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 50rpx;
					}

					.targetNumber {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #333333;
					}
				}

			}
		}
	}
</style>